import { Text, View } from "@tarojs/components";
import Input from "@/components/Input";
import { Form } from "@nutui/nutui-react-taro";
import { useRequest } from "taro-hooks";
import { joinFamilyByCode } from "@/services/Family";
import { showToast } from "@tarojs/taro";
import { Loading1 } from "@nutui/icons-react-taro";

export default ({refresh}) => {
  const [form] = Form.useForm();
  const { run, loading } = useRequest(joinFamilyByCode, {
    manual: true,
    onSuccess: () => {
      showToast({
        title: "加入成功",
        icon: "success",
      });
      refresh()
    },
  });
  return (
    <View>
      <Form
        form={form}
        onFinish={(v) => {
          run(v.code);
        }}
      >
        <Form.Item
          label="家庭码"
          name="code"
          rules={[
            {
              required: true,
              message: "请输入家庭码",
            },
          ]}
          validateTrigger='onSubmit'
        >
          <Input
            placeholder="请输入家庭码"
            end={
              loading ? (
                <Loading1 />
              ) : (
                <Text
                  onClick={() => {
                    form.submit();
                  }}
                >
                  加入家庭
                </Text>
              )
            }
          />
        </Form.Item>
      </Form>
    </View>
  );
};
